/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useMemo } from 'react';
import type { AliappIndexProps, AliappListItemType } from './_utils/useMiniAliappTable';
import { useMiniAliappTable } from './_utils/useMiniAliappTable';
import DragTable from '@/components/DragTable';
import ProTable from '@ant-design/pro-table';
import type { ProColumns } from '@ant-design/pro-table';
import { Space, Popconfirm } from 'antd';
import AliappAccount from './components/account';
import AliappBindDak from './components/bingDak';
import { history, useModel } from 'umi';
import { usePaginationCache } from '@base/components/keep-alive/_utils';

const MiniAliappTable: React.FC<AliappIndexProps> = (props) => {
  const { activeKey } = props;
  const { actionRef, getList, columns, reloadTable, joinAppBuildTask } = useMiniAliappTable(props);
  const { setPageData } = useModel('mini_aliapp');
  const id = `aliapp_${activeKey}`;

  const pagination = usePaginationCache(id, {
    pageSize: 20,
    showQuickJumper: false,
    showSizeChanger: false,
  });

  const operation: ProColumns<AliappListItemType>[] = useMemo(
    () => [
      {
        title: '操作',
        dataIndex: 'app_name',
        search: false,
        align: 'center',
        ellipsis: true,
        width: '25%',
        render: (_, item) => {
          const { merchant, inn_account, auth_appid } = item;
          const navigator = () => {
            setPageData({
              info: item,
              view: ['2', '4'].includes(activeKey) ? '1' : '',
            });
            history.push('/f/mini/aliapp/info');
          };
          return (
            <Space wrap>
              <AliappAccount
                merchant={merchant}
                auth_appid={auth_appid}
                reloadTable={reloadTable}
              />
              <a onClick={navigator}>{['1', '3'].includes(activeKey) ? '修改' : '查看'}类目</a>
              <AliappBindDak
                inn_account={inn_account}
                auth_appid={auth_appid}
                reloadTable={reloadTable}
              />
              {['1', '3'].includes(activeKey) && (
                <Popconfirm
                  title='确认此条审核？'
                  cancelText='取消'
                  okText='确定'
                  onConfirm={joinAppBuildTask.bind(null, auth_appid)}
                >
                  <a>{activeKey == '1' ? '提交' : '重新'}审核</a>
                </Popconfirm>
              )}
            </Space>
          );
        },
      },
    ],
    [activeKey],
  );

  return (
    <DragTable>
      <ProTable
        rowKey='id'
        name={id}
        actionRef={actionRef}
        request={getList}
        columns={[...columns, ...operation]}
        options={false}
        scroll={{ x: 900 }}
        search={false}
        pagination={pagination}
      />
    </DragTable>
  );
};

export default MiniAliappTable;
